<template>
    <NuxtLink class='item' :class="{'active':current===to}" :to="props.to">
        <slot></slot>
    </NuxtLink>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router'
const route = useRoute()
const props = defineProps({
    to:{
        type:String,
        required:true
    },
    icon:{
        type:String,
        default:''
    },
})
const current:Ref<string> = ref(route.path)
watch( ()=>route.path, val=> {
    current.value = val
})
</script>

<style lang="scss" scoped>
.item{
    text-align: center;
    transition: all 0.5s;
    cursor: pointer;
    padding: 10px 20px 10px 20px;
    color: #fff;
    font-size: 15px;
    border-bottom: 3px solid #ffffff00;
    &.active{
        border-bottom: 3px solid #fff;
    }
    &:hover{
        border-bottom: 3px solid #fff;
    }
}
</style>